<template>
  <div class="citypage subpage">
    <my-head
      :title="$route.query.name ? '当前城市-' + $route.query.name : '选择城市'"
    >
      <van-icon name="revoke" class="hicon" @click="gotoback" />
    </my-head>
    <div class="search">
      <van-search
        v-model="keyword"
        show-action
        placeholder="输入城市名或拼音"
        @search="onSearch"
        @cancel="onCancel"
      />
    </div>
    <div class="cbox" v-if="toggle">
      <div class="ctop">
        <div class="ctitle">GPS定位你所在城市</div>
        <div class="cul">
          <div class="citem gps">定位失败</div>
        </div>
      </div>

      <div class="ctop">
        <div class="ctitle">热门城市</div>
        <div class="cul">
          <div
            class="citem"
            v-for="(l, i) in hotcity"
            :key="i"
            @click="chooseCity(l)"
          >
            {{ l.name }}
          </div>
        </div>
      </div>
      <div class="clist">
        <van-index-bar>
          <div v-for="(l, i) in pylist" :key="i">
            <van-index-anchor :index="l">{{ l }}</van-index-anchor>
            <van-cell
              :title="item.name"
              v-for="(item, index) in cityList.filter(
                (val) => val.pinyin.indexOf(l.toLowerCase()) == 0
              )"
              :key="index"
              @click="chooseCity(item)"
            />
          </div>
        </van-index-bar>
      </div>
    </div>

    <div class="sclist" v-else>
      <div v-if="list.length > 0">
        <van-cell
          v-for="(l, i) in list"
          :title="l.name"
          :key="i"
          @click="chooseCity(l)"
        />
      </div>
      <div class="empty" v-else>
        <van-empty
          image=""
          description="没有找到匹配的城市"
        />
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      keyword: "",
      list: [],
      toggle: true, // 开关
      pylist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        // "U",
        // "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },

  // 路由组件守卫
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    if (!this.city) {
      next(false);
      this.$toast("请你先选择所在的城市");
    } else {
      next();
    }
  },
  methods: {
    onSearch(value) {
      this.toggle = false;
      this.list = this.cityList.filter(
        (item) =>
          item.name.indexOf(value) > -1 || item.pinyin.indexOf(value) > -1
      );
    },
    onCancel() {
      console.log("onCancel");
      this.list = [];
      this.toggle = true;
      this.keyword = "";
    },
    chooseCity(item) {
      this.changeCity(item);
      this.$router.back();
    },
    async getCityList() {
      let res = await this.$ajax.getMZdata(
        {},
        {
          "X-Host": "mall.film-ticket.city.list",
        }
      );
      this.changeCityList(res.data.cities);
    },
  },
  mounted() {
    if (!this.cityList.length > 0) {
      this.getCityList();
    }
  },
};
</script>


<style lang="scss" scoped>
.citypage {
  .ctop {
    padding: 15px;
  }
  .ctitle {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 10px;
  }
  .cul {
    display: flex;
    flex-wrap: wrap;

    .citem {
      height: 30px;
      background-color: #f4f4f4;
      line-height: 30px;
      border-radius: 3px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 10px 7.5px;
      font-size: 14px;
      color: #191a1b;
      text-align: center;
      padding: 0 25px;
    }
  }
}
</style>